<template>
  <div class="footer" :class="isshow ? 'an_move':''">
    <van-row>
      <van-col span="8">
        <!-- 首页部分 -->
        <div class="footer_item" @click="home">
          <div class="icon_div">
            <img :src="getImgPath + 'img/icon/botton_home_def.svg'" v-if="chooes_item != '/home'">
            <img :src="getImgPath + 'img/icon/botton_home.svg'" v-if="chooes_item == '/home'">
          </div>
          <span class="icon_font" :class="chooes_item == '/home' ? 'choose_font':''">首页</span>
        </div>
      </van-col>
      <!-- 订单部分 -->
      <van-col span="8">
        <div class="footer_item orders" @click="orders">
          <div class="icon_div">
            <img :src="getImgPath + 'img/icon/botton_order_def.svg'" v-if="chooes_item != '/orders'">
            <img :src="getImgPath + 'img/icon/botton_order.svg'" v-if="chooes_item == '/orders'">
          </div>
          <span class="icon_font" :class="chooes_item == '/orders' ? 'choose_font':''">订单</span>
        </div>
      </van-col>
      <!-- 我的部分 -->
      <van-col span="8">
        <div class="footer_item user" @click="user">
          <div class="icon_div">
            <img :src="getImgPath + 'img/icon/botton_my_def.svg'" v-if="chooes_item != '/user'">
            <img :src="getImgPath + 'img/icon/botton_my.svg'" v-if="chooes_item == '/user'">
          </div>
          <span class="icon_font" :class="chooes_item == '/user' ? 'choose_font':''">我的</span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {mapGetters,mapActions} from "vuex";
export default {
  name:"Footer",
  created() {
    this.show();
    let chooes_bott = window.sessionStorage.getItem("chooes_bott");
    this.chooes_item = chooes_bott;
  },
  data() {
    return {
      chooes_item:"",//当前选中的item
      isshow:false
    }
  },
  methods: {
    home(){
      if(this.$route.path == "/home") return;
      this.show();
      window.sessionStorage.setItem("chooes_bott","/home");
      this.$router.push("/home");
    },
    user(){
      if(this.$route.path == "/user") return;
      this.show();
      window.sessionStorage.setItem("chooes_bott","/user");
      this.$router.push("/user")
    },
    orders(){
      if(this.$route.path == "/orders") return;
      this.show();
      window.sessionStorage.setItem("chooes_bott","/orders");
      this.$router.push("/orders")
    },
    show(){
      this.isshow = false;
      setTimeout(() => {
        this.isshow = true;
      }, 200);
    }
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    }),
  },
  watch: {
    getItem(val){
      this.chooes_item = val;
    },
    "$route":function(val){
      let chooes_bott = window.sessionStorage.getItem("chooes_bott");
      // console.log(chooes_bott);
      this.chooes_item = chooes_bott;
    }
  },
}
</script>
<style lang="less" scoped>
  .footer{
    transition: all 1s;
    position: fixed;
    z-index: 1;
    bottom: -0.48rem;
    width: 100%;
    height: 0.48rem;
    overflow: hidden;
    font-size: 0.12rem;
    background-color: #ffffff;
    border-top: 0.01rem solid #F6F6F6;
    box-shadow: 0.01rem 0.03rem 0.1rem rgba(0, 0, 0, .2);
  }

  .an_move{
    transform: translateY(-0.48rem);
  }

  .van-row{
    height: 100%;
  }
  .van-col{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .icon_div{
    width: 0.24rem;
    height: 0.24rem;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .icon_font{
    display: block;
    color: #555555;
  }

  .choose_font{
    color: #E74E4B;
  }
</style>